<template>
  <div class="order-detail">
    <div class="order_sn">
      <span class="order-bumber">
        订单编号：
        <span>{{orderSn}}</span>
      </span>
      <span
        class="order-status"
        :style="$route.query.order_state == 40 ? 'color: #3AAC9A;' : 'color: #FF6600;'"
      >{{orderStateTitle}}</span>
    </div>
    <div class="common-title">
      <h1>土壤检测项目</h1>
      <p>SOIL TEST PROJECT</p>
    </div>
    <ul class="soil-testing-items">
      <li v-for="(item, index) in testItemSelectionList" :key="index">
        {{item.name}}
        <span>{{item.unit}}</span>
      </li>
    </ul>
    <div class="common-title">
      <h1>土壤检测信息</h1>
      <p>SOIL TESTTING INFORMATION</p>
    </div>
    <ul class="soil-testing-information">
      <li>
        <span class="information-properties">取样时间</span>
        <span class="information-value">{{samplingTime}}</span>
      </li>
      <li>
        <span class="information-properties">省市县</span>
        <span class="information-value">{{areaInfo}}</span>
      </li>
      <li>
        <span class="information-properties">详细地址</span>
        <span class="information-value">{{address}}</span>
      </li>
      <li>
        <span class="information-properties">种植面积</span>
        <span class="information-value">{{plantArea}}亩</span>
      </li>
    </ul>
    <div class="common-title">
      <h1>测土人信息</h1>
      <p>GEODESIC INFORMATION</p>
    </div>
    <ul class="geodesic-information">
      <li>
        <span class="information-properties">姓名</span>
        <span class="information-value">{{name}}</span>
      </li>
      <li>
        <span class="information-properties">电话</span>
        <span class="information-value">{{phone}}</span>
      </li>
    </ul>
    <div class="common-title">
      <h1>土壤作物信息</h1>
      <p>SOIL CROP INFORMATION</p>
    </div>
    <ul class="soil-crop-information">
      <li>
        <span class="information-properties">前茬作物</span>
        <span class="information-value">{{previousCrop ? previousCrop : '-'}}</span>
      </li>

      <li>
        <span class="information-properties">当季作物</span>
        <span class="information-value">{{seasonCrop ? seasonCrop : '-'}}</span>
      </li>
    </ul>
    <div class="common-title">
      <h1>发票信息</h1>
      <p>INVOICE INGFORMATION</p>
    </div>
    <ul class="invoice-information">
      <li>
        <span class="information-properties">是否开票</span>
        <span class="information-value" v-if="invoice">开票</span>
        <span class="information-value" v-else>不开票</span>
      </li>
    </ul>
    <div class="common-title">
      <h1>确认样本数</h1>
      <p>NUMBER OF CONFIMED SAMPLES</p>
    </div>
    <div class="number-of-confimed-samples">
      <p>
        小计：
        <span class="litter-number">￥{{goodsAmount}}</span>
        <span style="color:#A1A1A1;">X</span>
        样本数 {{sampleNumber}}
      </p>
      <p>
        合计：
        <span class="big-number">￥{{orderAmount}}</span>
      </p>
    </div>
    <div
      class="common-title"
      v-if="$route.query.order_state == 30 || $route.query.order_state == 40"
    >
      <h1>快递单信息</h1>
      <p>EXPRESS FORM FILING</p>
    </div>
    <ul
      class="express-form-filing"
      v-if="$route.query.order_state == 30 || $route.query.order_state == 40"
    >
      <li>
        <span class="information-properties">快递公司</span>
        <span class="information-value">{{express}}</span>
      </li>
      <li>
        <span class="information-properties">快递单号</span>
        <span class="information-value">{{shippingCode}}</span>
      </li>
    </ul>
    <div class="no-pay-btn" v-if="$route.query.order_state == 10">
      <button @click="buyAgain($route.query.order_id)">立即付款</button>
      <button @click="deleteItem()">取消订单</button>
    </div>
    <a
      :href="reportUrl"
      class="order-detail-btn"
      v-if="$route.query.order_state == 40 && reportUrl"
    >查看检测报告</a>
    <button
      class="express-btn"
      @click="$router.push({name: 'express', query: {order_id: $route.query.order_id}})"
      v-if="$route.query.order_state == 20 && shippingCode == ''"
    >填写快递单号</button>
  </div>
</template>

<script>
import {
  orderDetail,
  orderBuyAgain,
  orderCancel,
  testItems,
} from "@/api/common";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      testItemSelectionList: [],
      key: localStorage.getItem("userKey"),
      orderSn: "",
      orderStateTitle: "",
      samplingTime: "",
      areaInfo: "",
      address: "",
      texture: "",
      soil: "",
      name: "",
      phone: "",
      purpose: "",
      previousCrop: "",
      output: "",
      seasonCrop: "",
      targetOutput: "",
      goodsAmount: "",
      sampleNumber: "1",
      orderAmount: "",
      express: "",
      shippingCode: "",
      plantArea: "",
      invoice: null,
      reportUrl: "",
      canSubmit: true,
    };
  },
  mounted() {
    this.getOrderDetail();
  },
  methods: {
    deleteItem() {
      Dialog.confirm({
        title: "提示",
        message: "是否确认取消订单",
      })
        .then(() => {
          // on confirm
          orderCancel({
            order_id: this.$route.query.order_id,
            key: this.key,
          }).then((res) => {
            Toast("取消成功");
            this.$router.push({
              name: "all-orders",
              query: {
                orders_id: "10",
              },
            });
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    buyAgain(orderId) {
      if (this.canSubmit) {
        this.canSubmit = false;
      } else {
        return;
      }
      let data = {
        order_id: orderId,
        key: this.key,
      };
      orderBuyAgain(data)
        .then((res) => {
          this.canSubmit = true;
          let code = res.data.code;
          if (code == 200) {
            let config = res.data.datas.mp_data;
            // 判断一下 config 如果没有数据的情况
            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener(
                  "WeixinJSBridgeReady",
                  this.onBridgeReady(config),
                  false
                );
              } else if (document.attachEvent) {
                document.attachEvent(
                  "WeixinJSBridgeReady",
                  this.onBridgeReady(config)
                );
                document.attachEvent(
                  "onWeixinJSBridgeReady",
                  this.onBridgeReady(config)
                );
              }
            } else {
              this.onBridgeReady(config);
            }
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch((error) => {});
    },
    onBridgeReady(config) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: config.appId, //公众号名称，由商户传入
          timeStamp: config.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: config.nonceStr, //随机串
          package: config.package,
          signType: config.signType, //微信签名方式：
          paySign: config.paySign, //微信签名
        },
        (res) => {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 支付成功
            this.$router.push({
              name: "pay-notify",
              query: {
                pay: 1,
              },
            });
          } else {
            //支付失败
            this.$router.push({
              name: "pay-notify",
              query: {
                pay: 0,
              },
            });
          }
        }
      ).catch((error) => {});
    },
    getOrderDetail() {
      let data = {
        key: this.key,
        order_id: this.$route.query.order_id,
      };
      orderDetail(data).then((res) => {
        let data = res.data.datas.data;
        this.orderSn = data.order_sn;
        this.orderStateTitle = data.order_state_title;
        this.samplingTime = data.sampling_time;
        this.areaInfo = data.area_info;
        this.address = data.address;
        this.texture = data.texture;
        this.soil = data.soil;
        this.name = data.name;
        this.phone = data.phone;
        this.purpose = data.purpose;
        this.previousCrop = data.previous_crop;
        this.output = data.output;
        this.seasonCrop = data.season_crop;
        this.targetOutput = data.target_output;
        this.goodsAmount = data.goods_amount;
        this.sampleNumber = data.sample_number;
        this.orderAmount = data.order_amount;
        this.express = data.express;
        this.shippingCode = data.shipping_code;
        this.invoice = data.invoice;
        this.reportUrl = data.report_url;
        this.plantArea = data.plant_area;
        this.getTestItems(data.payment_amount_type)
      });
    },
    getTestItems(payment_amount_type) {
      let data = {
        payment_amount_type: payment_amount_type,
      };
      testItems(data)
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.testItemSelectionList = res.data.datas.data;
          }
        })
        .catch((error) => {
          this.$toast(error);
        });
    },
  },
};
</script>

<style scoped>
.order-detail {
  width: 100%;
  padding-bottom: 15px;
  box-sizing: border-box;
}
.order_sn {
  width: 100%;
  padding: 15px 3%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-bumber {
  font-size: 14px;
  color: #6b6b6b;
}
.order-bumber span {
  font-size: 13px;
  color: #aeaeae;
}
.order-status {
  font-size: 14px;
  color: #3aac9a;
}
.soil-testing-items {
  width: 100%;
  padding: 0 3%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.soil-testing-items li {
  width: 45%;
  border-bottom: 1px solid #f0f0f0;
  height: 47px;
  line-height: 47px;
  color: #797979;
  font-size: 14px;
}
.soil-testing-items li span {
  color: #aeaeae;
}
.soil-testing-information,
.geodesic-information,
.soil-crop-information,
.invoice-information,
.express-form-filing,
.number-of-confimed-samples {
  width: 100%;
  padding: 0 3%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 15px;
}
.soil-testing-information li,
.geodesic-information li,
.soil-crop-information li,
.invoice-information li,
.express-form-filing li {
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  height: 47px;
  display: flex;
  align-items: center;
}
.number-of-confimed-samples p {
  width: 100%;
  line-height: 40px;
  height: 40px;
  font-size: 14px;
  color: #333;
}
.information-properties {
  width: 20%;
  margin-right: 15px;
  color: #797979;
  font-size: 14px;
}
.information-value {
  font-size: 14px;
  color: #515151;
}
.soil-testing-information-type,
.soil-testing-information-texture {
  width: 45% !important;
}
.soil-testing-information-type .information-properties,
.soil-testing-information-texture .information-properties {
  width: 45%;
}
.order-detail-btn,
.express-btn {
  width: 80%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #39a794 !important;
  background: #fff;
  margin: 0 auto;
  display: block;
  color: #39a794;
  border-radius: 30px;
  border: 0;
}
.litter-number {
  color: #3da797;
}
.big-number {
  color: #ff6600;
  font-size: 20px;
}
.no-pay-btn {
  width: 100%;
  padding: 0 3%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.no-pay-btn button {
  width: 45%;
  height: 40px;
  color: #3da797;
  border: 1px solid #3da797;
  background: #fff;
  border-radius: 30px;
  outline: medium;
}
</style>
